<template>
	<view class="zixun-list">
		<view class="zixun-item" v-for="item in datalist" :key="item.id" @click="toWhere(item)">
			<view class="left">
				<image class="juxing" src="https://xcx.xiaombt.com/img/img/juxing31.png" mode=""></image>
				<image class="pai" :src="ENV.BASE_API + item.list_img" mode=""></image>
			</view>
			<view class="right">
				<view class="one">
					<view class="title">
						{{item.title}}
					</view>
					<view class="time">
						{{time(item.inputtime) }}
					</view>
				</view>
				<view class="two">
					{{item.title2}}
				</view>
				<view class="two">
					来源：长春市小马奔腾教育有限...
				</view>
				<view class="three">
					<view class="new">
						<image src="https://xcx.xiaombt.com/img/img/pinglun.png" mode=""></image>
					</view>
					<view class="shoucang">
						<image src="https://xcx.xiaombt.com/img/img/xihuan (1).png" mode=""></image>
						<image v-if="false" src="https://xcx.xiaombt.com/img/img/xihuan (2).png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { ENV } from '.env.js'
	export default{
		data(){
			return{
				ENV:null
			}
		},
		props:{
			datalist:{
				type:Array,
				default:function(){
					return [{
						id:'1',
						list_img:'img/img/矩形 30.png',
						title:'麋鹿',
						title2:'麋鹿介绍',
						inputtime: "1729135053"
					},
					{
						id:'2',
						list_img:'img/img/矩形 30.png',
						title:'麋鹿',
						title2:'麋鹿介绍',
						inputtime: "1729135053"
					},]
				}
			}
		},

		mounted(){
			this.ENV = ENV
		
		},
		methods:{
			toWhere(item){
				uni.navigateTo({
					url: '/page/consultDetail/index?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zixun-list{
		width: 100%;
		.zixun-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 28rpx;
			border-bottom: 1rpx solid #6C5D47;
			margin-bottom: 28rpx;
			.left{
				width: 168rpx;
				height: 168rpx;
				padding: 4rpx;
				box-sizing: border-box;
				background: linear-gradient(180.00deg, rgb(154, 138, 115),rgb(219, 209, 194) 100%);
				position: relative;
				.juxing{
					width: 152rpx;
					height: 152rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					z-index: 3;
				}
				.pai{
					width:160rpx;
					height:160rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					z-index: 2;
				}
			}
			.right{
				width: 470rpx;
				.one{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title{
						color: rgb(108, 93, 71);
						font-size: 28rpx;
						font-weight: 500;
						flex: 1;
						padding-right: 10rpx;
						white-space:nowrap;        // 强制一行显示
							overflow:hidden;          // 超出隐藏
							text-overflow:ellipsis;   // 省略号
						
					}
					.time{
						width: 120rpx;
						color: rgb(108, 93, 71);
						font-size: 24rpx;
						font-weight: 300;
					}
				}
				.two{
					width: 100%;
					white-space:nowrap;        // 强制一行显示
						overflow:hidden;          // 超出隐藏
						text-overflow:ellipsis;   // 省略号
						color: rgb(108, 93, 71);
						font-family: 思源黑体;
						font-size: 24rpx;
						font-weight: 300;
						margin-top: 15rpx;
				}
				.three{
					display: flex;
					align-items: center;
					float: right;
					margin-top: -10rpx;
					.new{
						width: 40rpx;
						height: 40rpx;
						image{
							width: 100%;
							height:100%;
						}
					}
					.shoucang{
						margin-left: 10rpx;
						width: 40rpx;
						height: 40rpx;
						image{
							width: 100%;
							height:100%;
						}
					}
				}
			}
		}
	}
</style>